<template>
	<view class="tabbar p-b-150">
		<uv-tabbar
			:fixed="true"
			:value="props.number"
			@change="change"
			placeholder
			@getPlaceholderHeight="getPlaceholderHeight"
			:customStyle="customStyle"
			inactiveColor="#666666"
			:border="false"
			activeColor="#840202"
			:placeholder="false"
		>
			<uv-tabbar-item text="首页">
				<template v-slot:inactive-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/home.png"></image>
				</template>
				<template v-slot:active-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/homes.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="商城">
				<template v-slot:inactive-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/mall.png"></image>
				</template>
				<!-- <template v-slot:active-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/malls.png"></image>
				</template> -->
				<template v-slot:active-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/malls2.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text=" ">
				<template v-slot:inactive-icon>
					<view class="m-b-30">
						<image style="width: 140rpx; height: 140rpx" src="../../static/image/diy.png"></image>
					</view>
				</template>
				<template v-slot:active-icon>
					<view class="m-b-30">
						<image style="width: 140rpx; height: 140rpx" src="../../static/image/diy.png"></image>
					</view>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="创意">
				<template v-slot:inactive-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/originality.png"></image>
				</template>
				<template v-slot:active-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/originalitys.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的">
				<template v-slot:inactive-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/my.png"></image>
				</template>
				<template v-slot:active-icon>
					<image style="width: 48rpx; height: 48rpx" src="../../static/image/mys.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
		<!-- <dy-login></dy-login> -->
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { LoginCenterApi } from '@/api/serves';
import { getCurrentInstance } from 'vue';
const emit = defineEmits(['change', 'getPlaceholderHeight']);
const props = defineProps({
	number: {
		type: [String, Number],
		default: 0
	}
});
const customStyle = ref({
	height: '184rpx',
	paddingTop: '11rpx'
});
const getPlaceholderHeight = (e) => {
	console.log(e.height, '-------=2222============');
	emit('getPlaceholderHeight', e.height);
};
const tabBar = ref([
	{
		pagePath: '/pages/index/index',
		text: '首页',
		number: 0
	},
	{
		pagePath: '/pages/mall/mall',
		text: '商城',
		number: 1
	},
	{
		pagePath: '/pages/diy/diy',
		text: 'DIY',
		number: 2
	},
	{
		pagePath: '/pages/originality/originality',
		text: '创意',
		number: 3
	},
	{
		pagePath: '/pages/my/my',
		text: '我的',
		number: 4
	}
]);
const change = (e) => {
	let tabBarData = tabBar.value[e];
	uni.switchTab({
		url: tabBarData.pagePath
	});
	emit('change', tabBarData);
};
onMounted(() => {
	uni.hideTabBar(); // 只有 TabBar 页面才能调用
});
</script>

<style lang="scss" scoped>
.tabbar {
	position: relative;
	z-index: 9999;
}
.u-page__item__slot-icon {
	width: 48rpx;
	height: 48rpx;
}

.cImg {
	border-radius: 50%;
	// border-top: 4rpx solid #dedede;
	width: 140rpx;
	height: 140rpx;
	flex-shrink: 0;

	image {
		width: 140rpx;
		height: 140rpx;
		flex-shrink: 0;
	}
}
</style>
